import React from 'react'
import '../assets/pager.css'
/**
 * 
 * @param {*} props 
 * 1.total  总数
 * 2.current 初始页码
 * 3.pageSize 每页数量
 * 4.pannelNumber 最多显示多少页码
 * 5. onPageChange 当前页码改变的事件
 */
export default function Pager(props) {
  
  const pageNumber = getPageNumber(props)
  const min = getMinNum(props)
  const max = getMaxNum(min,props,pageNumber)

  console.log(min,max)
  let numbers = []
  for(let i = min;i<= max;i++){
    numbers.push(
      <span key={i} className={
        props.current === i?"item active":"item"
      } onClick={ ()=>{toPage(i,props)}} >{i}</span>
    )
  }
  return (
    <>
      <span 
      className={
        props.current === 1 ? 'item disabled':'item'
      }
      onClick={()=>{
        if(props.current === 1)return;
        toPage(1,props)
      }}
      >首页</span>
       <span 
      className={
        props.current === 1 ? 'item disabled':'item'
      } 
      onClick={()=>{
        if(props.current === 1)return;
        
        toPage(props.current - 1,props)
      }}
      >上一页</span>
   {numbers}
       <span 
      className={
        props.current === getPageNumber(props) ? 'item disabled':'item'
      }
      onClick={()=>{
        if(props.current >= getPageNumber(props))return;
        toPage(props.current + 1,props)
      }}
     
      >下一页</span>
    
        <span 
      className={
        props.current >= getPageNumber(props) ? 'item disabled':'item'
      } 
      onClick={()=>{
        if(props.current === getPageNumber(props))return;
        toPage(getPageNumber(props),props)
      }}
      >尾页</span>

      <span className='current'>
        {props.current}
      </span>/
      <span> 
        {getPageNumber(props)}
      </span>
    </>
  )

}
/**
 * 计算总页数
 * @param {*} props 
 */
function getPageNumber(props){
  return Math.ceil(props.total / props.pageSize)
}

/**
 * 下一页
 * @param {*} props 
 */
function nextPage(props) {
  
}
/**
 * 跳转到具体页码
 * @param {*} target 目标页码 
 * @param {*} props 所有属性 
 */
function toPage(target,props) {
  console.log(target)
    console.log(props.current)
    props.onPageChange && props.onPageChange(target)
}
/**
 * 计算显示最小页码
 * @param {*} props 
 */
function getMinNum(props){
  let min = props.current - Math.floor(props.pannelNumber / 2)
  if(min < 1){
    return 1
  }
  console.log(min)
  return min
}

/**
 * 计算显示最大页码
 * @param {*} props 
 */
function getMaxNum(min,props,pageNumber){
  let max = min + props.pannelNumber - 1
  if(max > pageNumber){
    return pageNumber
  }
  return max
}